<template>
  <div>
    <el-form :inline="true" ref="form"  class="demo-form-inline" label-width='80px'>
      <el-row>
        <el-col :span="6">
          <el-form-item label="标签名称" >
            <el-input  v-model="formInline.tags" placeholder="请输入"></el-input>
          </el-form-item></el-col>
        <el-col :span="6"><el-form-item label="城市">
            <el-select v-model="formInline.province" placeholder="请选择" @change="provincesVal">
              <el-option :label="item" :value="item" v-for="item in provinces" :key="item"></el-option>
            </el-select>
          </el-form-item></el-col>
        <el-col :span="6"><el-form-item label="地区">
            <el-select v-model="formInline.city" placeholder="请选择" >
              <el-option :label="item" :value="index" v-for="(item,index) in citys" :key="item"></el-option>
            </el-select>
          </el-form-item></el-col>
        <el-col :span="6"><el-form-item label="企业简称">
            <el-input v-model="formInline.shortName" ></el-input>
          </el-form-item></el-col>
      </el-row>
          <el-form-item label="状态">
            <el-select v-model="formInline.state" placeholder="请选择" >
              <el-option v-for="item in status" :key="item.value" :label="item.label" :value="item.value"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item style="margin-left: 30px;">
            <el-button @click="resetForm">清除</el-button>
            <el-button type="primary" @click="searchBtn">搜索</el-button>
          </el-form-item>
        </el-form>
  </div>
</template>

<script>
import { citys, provinces } from '@/api/hmmm/citys.js'
import { status } from '@/api/hmmm/constants.js'
export default {
  name: 'from',
  props: {
    formInline: {
      type: Object,
      required: true
    }
  },
  data () {
    return {
      provinces: null,
      citys: null
    }
  },

  created () {
    console.log(status)
    this.provinces = provinces()
    this.status = status
  },

  methods: {
    // 根据城市得到区
    provincesVal (val) {
      console.log(val)
      this.citys = citys(val)
      this.formInline.city = this.citys[0]
    },
    // 重置表单
    resetForm () {
      this.citys = ''
      this.$emit('resetForms')
    },
    searchBtn () {
      this.formInline.page = 1
      this.$emit('searchBtns', this.formInline)
    }
  }
}
</script>

<style scoped lang="scss">
::v-deep .el-input {
    width: 240px !important;
}
</style>
